<template>
  <div class="container-fluid">
    <div v-if="isShow" class="row default">
      <div class="col-12">
        <div class="row">
          <div class="col-6">
            <strong style="font-size: 17px">{{ title }}</strong>
          </div>

          <div class="col-6 d-flex justify-content-end">
            <span
              >最近时间排序<i
                style="font-weight: bolder"
                class="el-icon-sort"
              ></i
            ></span>
          </div>
        </div>
      </div>

      <div
        class="col-12 hover padding-20 shadow-sm"
        v-for="item in userList"
        style="cursor: pointer; height: 100px; line-height: 100px"
        @click="visitUser(item.info.id)"
        :key="item.info.id"
      >
        <div style="display: inline-block">
          <el-avatar :size="50" :src="item.info.avatar"></el-avatar>
        </div>

        <span
          style="
            position: relative;
            bottom: 20px;
            font-weight: bold;
            font-size: 15px;
            color: black;
          "
          >&nbsp;&nbsp;&nbsp;&nbsp;{{ item.info.nick }}</span
        >

        <span
          style="
            position: relative;
            bottom: 20px;
            font-weight: bold;
            font-size: 15px;
            color: black;
            float: right;
          "
          >{{
            isSelf ? getSelfStatus(item.info.id) : getOtherStatus(item.info.id)
          }}</span
        >
      </div>
    </div>

    <div v-else class="col-12">
      <el-empty
        :description="desc"
        :image-size="200"
        :image="require(`bodyLeftDefaultImage`)"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      userList: [],
      isShow: true,
      isSelf: false,
      desc: "出错了",
      title: "",
      status: false,
    };
  },
  methods: {
    flushPage() {
      let _this = this;
      let param = this.$route.query;
      let user = fake.methods.getUser(param.id);
      this.isSelf = param.id === fake.self.info.id;
      this.userList = [];
      if (param.type === "1") {
        this.status = true;
        this.title = this.isSelf
          ? "我的关注"
          : user.info.sex === "男"
          ? "他" + "的关注"
          : "她" + "的关注";
        user.line.forEach((value) => {
          if (value.content === "关注") {
            value.list.forEach((id) => {
              _this.userList.push(fake.methods.getUser(id));
            });
          }
        });
        if (user.set.showFocus) {
          if (this.userList.length !== 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
            this.desc = this.isSelf ? "你还没有关注的人哦~" : "暂无关注的人~";
          }
        } else {
          if (this.isSelf) {
            if (this.userList.length !== 0) {
              this.isShow = true;
            } else {
              this.isShow = false;
              this.desc = "你还没有关注的人哦~";
            }
          } else {
            this.isShow = false;
            this.desc = "用户设置了隐私，无法查看" + this.title;
          }
        }
      } else {
        this.status = false;
        this.title = this.isSelf
          ? "我的粉丝"
          : user.info.sex === "男"
          ? "他" + "的粉丝"
          : "她" + "的粉丝";
        user.line.forEach((value) => {
          if (value.content === "粉丝") {
            value.list.forEach((id) => {
              _this.userList.push(fake.methods.getUser(id));
            });
          }
        });
        if (user.set.showFans) {
          if (this.userList.length !== 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
            this.desc = this.isSelf
              ? "你的粉丝还在赶来的路上~"
              : "作者还未收到粉丝~";
          }
        } else {
          if (this.isSelf) {
            if (this.userList.length !== 0) {
              this.isShow = true;
            } else {
              this.isShow = false;
              this.desc = "你的粉丝还在赶来的路上~";
            }
          } else {
            this.isShow = false;
            this.desc = "用户设置了隐私，无法查看" + this.title;
          }
        }
      }
    },
    visitUser(id) {
      this.$router.push({
        name: "User",
        query: {
          id: id,
        },
      });
    },
    getSelfStatus(id) {
      let userLine = fake.methods.getUser(id).line;
      let result = this.status ? "已关注" : "回关";
      let condition = this.status ? "关注" : "粉丝";
      userLine.forEach((value) => {
        if (value.content === condition) {
          if (value.list.indexOf(fake.self.info.id) !== -1) {
            result = "互相关注";
          }
        }
      });
      return result;
    },
    getOtherStatus(id) {
      let userLine = fake.methods.getUser(id).line;
      let result = "关注";
      userLine.forEach((value) => {
        if (value.content === "关注") {
          if (value.list.indexOf(fake.self.info.id) !== -1) {
            result = "回关";
          }
        }
        if (value.content === "粉丝") {
          if (value.list.indexOf(fake.self.info.id) !== -1) {
            if (result === "回关") {
              result = "互相关注";
            }
          }
        }
      });
      if (fake.self.info.id === id) {
        result = "我";
      }
      return result;
    },
  },
  watch: {
    $route() {
      this.flushPage();
    },
  },
  mounted() {
    this.flushPage();
  },
};
</script>

<style scoped>
.index {
  background-color: skyblue;
}
strong {
  font-size: 20px;
}
span {
  font-size: 13px;
  color: rgba(2, 2, 2, 0.489);
}
.hover {
  transition: all 0.2s;
}
.hover:hover {
  border-radius: 10px;
  background-color: rgba(238, 238, 238, 0.742);
  transition: all 0.3s;
}
</style>